<template>
  <div v-show="showType === 'img'" class="flex column">
    <div style="text-align: center">
      <el-button @click="showFlex">查看flex布局效果</el-button>
    </div>
    <div class="flex1">
      <img
        src="@/img/flex.png"
        alt=""
        style="width: 100%; height: 100%; object-fit: cover"
      />
    </div>
  </div>
  <div class="flex-box flex" v-show="showType === 'flex'">
    <div class="left-side white box-shadow">
      左侧菜单栏
      <el-button @click="showImg">查看原型图</el-button>
    </div>
    <div class="main gray">
      <div class="header">header</div>
      <div class="content gray">
        <div class="left-content gray">
          <div class="top-overview">
            <div class="top-item white box-shadow">top-item</div>
            <div class="top-item white box-shadow">top-item</div>
            <div class="top-item white box-shadow">top-item</div>
            <div class="top-item white box-shadow">top-item</div>
          </div>
          <div class="detail-overview">
            <div class="detail-item white box-shadow">detail-item</div>
            <div class="detail-item white box-shadow">detail-item</div>
            <div class="detail-item white box-shadow">detail-item</div>
            <div class="detail-item white box-shadow">detail-item</div>
            <div class="details white box-shadow">details</div>
          </div>
        </div>
        <div class="right-content gray">
          <div class="search-box box-shadow">search-box</div>
          <div class="tip-box box-shadow">
            <div class="title">title</div>
            <div class="tip">tip</div>
            <div class="tip">tip</div>
            <div class="tip">tip</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script setup lang="ts">
import { ref } from "vue";

let showType = ref("img");
const showImg = () => {
  showType.value = "img";
};
const showFlex = () => {
  showType.value = "flex";
};
</script>
<style lang="scss" scoped>
.flex {
  display: flex;
}
.column {
  flex-direction: column;
}
.flex1 {
  flex: 1;
}
.white {
  background-color: #fff;
}
.box-shadow {
  box-shadow: 2px 2px 2px #888;
}
.gray {
  background-color: #eee;
}
.flex-box {
  .left-side {
    width: 200px;
  }
  .main {
    flex: 1;
    display: flex;
    flex-direction: column;
    background-color: #eee;
    .header {
      height: 60px;
      background-color: dodgerblue;
    }
    .content {
      flex: 1;
      display: flex;
      background-color: #eee;
      .left-content {
        flex: 1;
        display: flex;
        flex-direction: column;

        .top-overview {
          height: 130px;
          display: flex;

          justify-content: space-around;
          & > div {
            flex: 1;
            background-color: #fff;
            margin: 10px;
          }
        }
        .detail-overview {
          flex: 1;
          display: flex;
          flex-direction: column;

          & > div {
            margin: 0 10px 10px 10px;
            background-color: #fff;
          }
          .detail-item {
            height: 200px;
          }
          .details {
            height: 150px;
            margin-bottom: 0;
          }
        }
      }
      .right-content {
        width: 400px;

        .search-box {
          height: 110px;
          margin: 10px 10px 10px 0;
          background-color: #fff;
        }
        .tip-box {
          display: flex;
          flex-direction: column;
          justify-content: flex-start;
          background-color: #fff;
          margin: 0 10px 10px 0;
          & > div {
            margin: 0 10px 10px 10px;
          }
          .title {
            height: 50px;
            background-color: #fff;
            margin-top: 10px;
          }
          .tip {
            height: 50px;
            background-color: burlywood;
          }
        }
      }
    }
  }
}
</style>
